<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: gzy 810461372@qq.com
 * @LastEditTime: 2023-09-05 09:09:47
-->
<template>
  <el-card
    v-if="treeData.data.length != 0"
    class="box-card"
    style="height: 100%; position: relative"
  >
    <el-row style="height: 100%">
      <el-col :span="2">
        <a-tree
          v-model:selectedKeys="treeData.selectTree"
          :tree-data="treeData.data"
          @select="treeChange"
        />
      </el-col>

      <el-col :span="22" style="height: 100%">
        <div style="height: 95%">
          <el-row style="height: 100%">
            <el-col :span="20" style="height: 100%">
              <div id="rainEcharts" style="width: 100%; height: 49%"></div>

              <div id="resultEcharts" style="width: 100%; height: 49%"></div>
            </el-col>
            <el-col :span="4">
              <el-form :model="computeParam" label-width="auto">
                <div class="card-box">
                  <div class="card-box-title">流域信息</div>

                  <el-form-item label="流域面积">
                    <el-input v-model="computeParam.area" readonly>
                      <template #suffix>km²</template>
                    </el-input>
                  </el-form-item>
                </div>

                <div class="card-box">
                  <div class="card-box-title">产流参数</div>

                  <el-form-item label="X1">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="产流水库容量"
                        placement="bottom"
                      >
                        X1
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.x1">
                      <template #suffix>mm</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="X2">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="地下水交换系数"
                        placement="bottom"
                      >
                        X2
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.x2">
                      <template #suffix>mm</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="X3">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="汇流水库容量"
                        placement="bottom"
                      >
                        X3
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.x3">
                      <template #suffix>mm</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="X4">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="单位线汇流时间"
                        placement="bottom"
                      >
                        X4
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.x4">
                      <template #suffix>day</template>
                    </el-input>
                  </el-form-item>

                  <el-form-item label="KC">
                    <el-input v-model="computeParam.kc" />
                  </el-form-item>
                </div>

                <div class="card-box">
                  <div class="card-box-title">产沙参数</div>
                  <el-form-item label="CM1">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="降雨量小于侵蚀性降雨的坡面水流最大可能含沙量"
                        placement="bottom"
                      >
                        CM1
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.cm1" />
                  </el-form-item>
                  <el-form-item label="REMM">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="流域最大抗侵蚀能力"
                        placement="bottom"
                      >
                        REMM
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.remm" />
                  </el-form-item>
                  <el-form-item label="A">
                    <el-input v-model="computeParam.a" />
                  </el-form-item>
                  <el-form-item label="BS">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="土壤抗侵蚀能力分布曲线指数"
                        placement="bottom"
                      >
                        BS
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.bs" />
                  </el-form-item>
                  <el-form-item label="CGM">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="沟道水流达平均流速时的沟道产沙浓度"
                        placement="bottom"
                      >
                        CGM
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.cgm" />
                  </el-form-item>
                  <el-form-item label="BV">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="关系式的系数"
                        placement="bottom"
                      >
                        BV
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.bv" />
                  </el-form-item>
                  <el-form-item label="CM2">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="降雨量大于侵蚀性降雨的坡面水流最大可能含沙量"
                        placement="bottom"
                      >
                        CM2
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.cm2" />
                  </el-form-item>
                  <el-form-item label="PM">
                    <template #label>
                      <el-tooltip
                        effect="light"
                        content="侵蚀性降雨"
                        placement="bottom"
                      >
                        PM
                      </el-tooltip>
                    </template>

                    <el-input v-model="computeParam.pm" />
                  </el-form-item>
                </div>
              </el-form>

              <el-form-item>
                <el-button type="primary" @click="compute">
                  计算泥沙
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-form :inline="true" class="form-inline">
      <el-form-item label="选择时间">
        <el-date-picker
          v-model="planTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="getChartData"
          @focus="getChartData"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="planSave">保存方案</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
import {
  ref,
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  provide,
} from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";

import * as echarts from "echarts";

import moment, { Moment } from "moment";

import {
  getRainFalls,
  getRainFallModel,
  updataRainModelInfo,
} from "@/request/api";

export default defineComponent({
  name: "modelFormulasAdd",
  components: {},
  setup: () => {
    const router = useRouter(),
      route = useRoute(),
      store = useStore();

    const planTime = ref([moment().subtract(7, "day"), moment()]);

    const treeData = reactive({
      selectTree: [],
      selectObj: {
        key: "",
        chartData: [],
        param: {
          area: "",
          x1: "",
          x2: "",
          x3: "",
          x4: "",
          kc: "",
          cm1: "",
          remm: "",
          a: "",
          bs: "",
          cgm: "",
          bv: "",
          cm2: "",
          pm: "",
        },
      },
      data: [],
    });

    const state = reactive({
      computeParam: {
        area: "",

        x1: "",
        x2: "",
        x3: "",
        x4: "",
        kc: "",

        cm1: "",
        remm: "",
        a: "",
        bs: "",
        cgm: "",
        bv: "",
        cm2: "",
        pm: "",
      },
    });

    function treeChange(checkedKeys) {
      if (checkedKeys.length != 0) {
        const selectTreeData = treeData.data.find(
          (item) => item.key === checkedKeys[0]
        );

        treeData.selectObj = selectTreeData;

        rainEchartsInit(treeData.selectObj.chartData);

        // for (const key in computeParam) {
        // }
        state.computeParam = treeData.selectObj.param;
      } else {
        treeData.selectTree = [treeData.selectObj.key];
      }
    }

    onMounted(() => {
      // 路由传参
      const routerParams: any = route.params;

      getChartData();
    });

    async function getChartData() {
      const requestData: any = await getRainFalls({
        startTime: moment(planTime.value[0]).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(planTime.value[1]).format("YYYY-MM-DD 23:59:59"),
        area: route.params.reservoir,
        ratedYear: route.params.id,
      });

      treeData.data = requestData.treeData.map((item) => {
        return {
          key: item.bsnm,
          title: item.bsnm,
          riverWeightId: item.riverWeightId,

          param: {
            area: item.area,
            ...item.gr4JParameter,
            ...item.pqssparameter,
          },
          chartData: requestData.data[item.bsnm],
        };
      });

      treeData.selectTree = [treeData.data[0].title];

      treeData.selectObj = treeData.data.find(
        (item) => item.title === treeData.selectTree[0]
      );

      // for (const key in computeParam) {
      //   computeParam[key] = treeData.selectObj.param[key];
      // }
      state.computeParam = treeData.selectObj.param;

      setTimeout(() => {
        rainEchartsInit(treeData.selectObj.chartData);
      }, 0.5 * 1000);
    }

    function rainEchartsInit(chartData) {
      const elem = document.getElementById("rainEcharts");

      let myChart = echarts.getInstanceByDom(elem);

      if (myChart == undefined) {
        myChart = echarts.init(elem);
      }

      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: 40,
          right: 50,
          bottom: 20,
        },
        xAxis: {
          type: "category",
          data: chartData.map((item) => item.tm),
          axisTick: {
            inside: true,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            data: chartData.map((item) => item.p),
            type: "bar",
          },
        ],
      };

      myChart.setOption(option, true);

      setTimeout(() => {
        myChart.resize();
      }, 0);
    }

    async function compute() {
      console.log(treeData.selectObj);

      const requestData: any = await getRainFallModel({
        gr4jPqssModel: JSON.stringify(state.computeParam),
        river: treeData.selectObj.key,
        boundaryJson: JSON.stringify(treeData.selectObj.chartData),
      });

      console.log(requestData.data[treeData.selectObj.key]);

      resultEchartsInit(requestData.data[treeData.selectObj.key]);
    }

    function resultEchartsInit(chartData) {
      const elem = document.getElementById("resultEcharts");

      let myChart = echarts.getInstanceByDom(elem);

      if (myChart == undefined) {
        myChart = echarts.init(elem);
      }

      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: true,
          top: 25,
        },
        grid: {
          left: 40,
          right: 50,
          bottom: 20,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: { onZero: false },
          data: chartData.map((item) => item.rainDate),
        },
        yAxis: [
          {
            name: "流量(m³/s)",
            type: "value",
            scale: true,
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
          },
          {
            name: "雨量(mm)",
            type: "value",
            scale: true,
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
          },
        ],
        series: [
          {
            name: "流量",
            type: "line",
            lineStyle: {
              width: 1,
            },
            data: chartData.map((item) => item.q),
            showSymbol: false,
          },
          {
            name: "含沙量",
            type: "line",
            yAxisIndex: 1,
            lineStyle: {
              width: 1,
            },
            data: chartData.map((item) => item.s),
            showSymbol: false,
          },
        ],
      };

      myChart.setOption(option, true);

      setTimeout(() => {
        myChart.resize();
      }, 0);
    }

    async function planSave() {
      await updataRainModelInfo({
        id: route.params.id,
        list: treeData.data.map((item) => {
          return {
            bsnm: item.title,
            riverWeightId: item.riverWeightId,
            gr4jPqssModel: JSON.stringify(item.param),
          };
        }),
      });
    }

    return {
      ...toRefs(state),

      planTime,
      treeData,
      treeChange,

      getChartData,

      compute,
      planSave,
    };
  },
});
</script>

<style scoped lang="less">
.card-box {
  padding: 10px;
  margin: 5px;
  padding-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

  .card-box-title {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .el-form-item {
    margin-bottom: 10px;
  }
}
.form-inline {
  position: absolute;
  top: 20px;
  left: 160px;
}
</style>
